/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-10 10:39:25
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-12 20:46:27
 * @FilePath: /operator-manager/src/pages/CouponManage/VerificationRecords/index.tsx
 * @Description: 优惠券管理-推广优惠券
 */

import { getAgentCouponList } from '@/services';
import {
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import type { FormInstance } from 'antd';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useRef, useState } from 'react';

import { defaultPagination, defaultTableData } from '@/utils/globalConstants';
import { agentCouponStatusMap } from '../constants';
import {
  CouponEnum,
  AgentCouponEnum,
  AgentCouponTableDataType,
} from '../type.d';


export default function AgentCouponListPage() {
  const searchRef = useRef<FormInstance>();
  const [tableData, setTableData] = useState({ ...defaultTableData });
  const [paginationCurrent, setPagination] = useState({ ...defaultPagination });
  //获取优惠券列表数据
  const fetchAgentCouponList = async (params = {}) => {
    const searchValues = searchRef?.current?.getFieldsValue() ?? {};
    const searchParams = {
      ...searchValues,
      ...paginationCurrent,
      ...params,
    };
    console.log('进行搜索的条件为', searchParams);
    const result = await getAgentCouponList(searchParams);
    const { dataList, totalResult } = result?.data ?? {};
    setTableData({
      dataList,
      total: totalResult,
    });
  };
  const columns: ColumnsType<AgentCouponTableDataType> = [
    {
      title: '优惠券',
      dataIndex: CouponEnum.NAME,
      width: 150,
    },
    {
      title: '类型',
      dataIndex: CouponEnum.TYPE,
      width: 150,
    },
    {
      title: '来源商家',
      dataIndex: AgentCouponEnum.SOURCE,
      width: 150,
    },
    {
      title: '用券规则',
      dataIndex: AgentCouponEnum.RULE,
      width: 150,
    },
    {
      title: '佣金',
      dataIndex: AgentCouponEnum.COMMISSION,
      width: 150,
    },
    {
      title: '领取数量',
      dataIndex: CouponEnum.COUNT_DRAW,
      width: 150,
    },
    {
      title: '核销数量',
      dataIndex: CouponEnum.COUNT_USED,
      width: 150,
    },
    {
      title: '状态',
      dataIndex: AgentCouponEnum.STATUS,
      width: 150,
      render: (value) => {
        const item = agentCouponStatusMap.get(value);
        return item ? (
          <span style={{ color: item?.color }}>{item?.label}</span>
        ) : (
          '-'
        );
      },
    }
  ];
  useEffect(() => {
    fetchAgentCouponList();
  }, []);

  return (
    <div>
      <QueryFilter
        defaultCollapsed={false}
        split
        formRef={searchRef}
        submitter={{
          render: (_, dom) => {
            return dom.reverse();
          },
        }}
        onFinish={async (values) => {
          fetchAgentCouponList({ ...values });
        }}
        onReset={() => {
          fetchAgentCouponList();
        }}
      >
        <ProFormText name={CouponEnum.NAME} label="优惠券" />
      </QueryFilter>
      <Table
        rowKey={AgentCouponEnum.ID}
        dataSource={tableData.dataList}
        columns={columns}
        scroll={{ x: 'max-width' }}
        style={{ marginTop: '20px' }}
        pagination={{
          pageSize: paginationCurrent.pageSize,
          current: paginationCurrent.page,
          pageSizeOptions: [20, 50, 100],
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: (page, pageSize) => {
            setPagination({ page, pageSize });
            fetchAgentCouponList({ page, pageSize });
          },
        }}
      />
    </div>
  );
}
